{% extends "base.html" %}
{% load thumbnail %}

{% block title %}{{ user.get_full_name }}{% endblock %}

{% block content %}
    <h1>{{ user.get_full_name }}</h1>
    <div class="profile-info">
    {% thumbnail user.profile.photo "180x180" crop="100%" as im %}
        <img src="{{ im.url }}" class="user-detail">
    {% endthumbnail %}
    </div>
    {% with total_followers=user.followers.count %}
        <span class="count">
            <span class="total">{{ total_followers }}</span>
            follower{{ total_followers|pluralize }}
        </span>
        <a href="#" data-id="{{ user.id }}" data-action="{% if request.user in user.followers.all %}un{% endif %}follow" class="follow button">
            {% if request.user not in user.followers.all %}
                Follow
            {% else %}
                Unfollow
            {% endif %}
        </a>
        <div id="image-list" class="image-container">
            {% include "images/image/list_ajax.html" with images=user.images_created.all %}
        </div>
    {% endwith %}
{% endblock %}

{% block domready %}
    $('a.follow').click(function(e){
        e.preventDefault();
        $.post('{% url "user_follow" %}',
            {
                id: $(this).data('id'),
                action: $(this).data('action')
            },
            function(data){
                if (data['status'] == 'ok')
                {
                    var previous_action = $('a.follow').data('action');

                    // toggle data-action
                    $('a.follow').data('action', previous_action == 'follow' ? 'unfollow' : 'follow');
                    // toggle link text
                    $('a.follow').text(previous_action == 'follow' ? 'Unfollow' : 'Follow');

                    // update total followers
                    var previous_followers = parseInt($('span.count .total').text());
                    $('span.count .total').text(previous_action == 'follow' ? previous_followers + 1 : previous_followers - 1);
                }
        });
    });
{% endblock %}
